import React, {
  useState,
  memo,
  useContext,
  forwardRef,
} from "react";
import { Swiper } from "antd-mobile";
import { ScrollWinnerWrapper } from "./style";

import { getDrawPrizeDataByid } from "@Services/api";
import ContextApp from "@Pages/context";

import { phoneWithStar } from "@Utils";

const ScrollWinner = forwardRef((props, ref) => {
  const [dataList, setDataList] = useState([]);
  const Consumer = useContext(ContextApp);

  const init = async () => {
    const params = {
      id: Consumer.activeId,
    };
    await getDrawPrizeDataByid(params).then(({ code, data }) => {
      if (code == 200) {
        // 手机号转*
        data.length > 0 &&
          data.map((v) => {
            let { phone } = v;
            v.phone = phoneWithStar(phone);
          });
        // return data;
        setDataList(data);
      }
    });
  };
  // *挂载到ref上
  ref.current = { init };

  const verticalItems = dataList.map((item, index) => (
    <Swiper.Item key={index}>
      <div className="swiperItem ">
        <span className="noWrap">
          恭喜&nbsp;{item.phone}&nbsp;获得{item.name}
        </span>
      </div>
    </Swiper.Item>
  ));

  return (
    <>
      {dataList.length > 0 && (
        <ScrollWinnerWrapper>
          <div className="ScrollBox">
            <img src={require("./images/gonggao.png")} alt="" />
            <Swiper
              autoplay
              loop
              direction="vertical"
              style={{ "--height": "50px" }}
              indicator={() => null}
            >
              {verticalItems}
            </Swiper>
          </div>
        </ScrollWinnerWrapper>
      )}
    </>
  );
});

export default memo(ScrollWinner)